/*
 * @Author: xiaosihan
 * @Date: 2024-08-18 02:50:07
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-09-17 17:41:19
 */


// 协作的头部

import { autorun } from "mobx";
import { useEffect, useRef, useState } from "react";
import styles from "./head.module.less";
import { LeftOutlined } from "@ant-design/icons";
import { Breadcrumb, Button } from "antd";
import hashHistory from "@hashHistory";
import partCollaborateStore from "../partCollaborateStore";
import LoginBtn from "@views/pc/component/LoginBtn/LoginBtn";
import ShareModal from "@views/pc/PartsDetails/Joiner/ShareModal/ShareModal";
import shareModalStore from "@views/pc/PartsDetails/Joiner/ShareModal/shareModalStore";
import partLableApi from "@api/partCollaborateApi";
import { get } from "lodash";
import partCollaborateDemoStore from "@views/pc/PartCollaborateDemo/partCollaborateDemoStore";
import userStore from "@views/userStore";

// 协作的头部
export default function Head() {

    const dom = useRef<HTMLDivElement | null>(null);
    const [modelName, setModelName] = useState(partCollaborateStore.modelName);
    const [modelId, setModelId] = useState(partCollaborateStore.modelId);
    const [formPath, setFormPath] = useState(partCollaborateStore.formPath);
    const [formName, setFormName] = useState(partCollaborateStore.formName);

    const [joiner, setJoiner] = useState<Array<any>>([]);
    const [joinerTotal, setJoinerTotal] = useState(0);

    const isDemo = (location.hash === "#/partCollaborateDemo");

    useEffect(() => {
    }, []);

    useEffect(() => autorun(() => {
        setModelName((isDemo ? partCollaborateDemoStore : partCollaborateStore).modelName);
        setModelId(partCollaborateStore.modelId);
        setFormPath(partCollaborateStore.formPath);
        setFormName(partCollaborateStore.formName);
    }, { delay: 30 }), []);

    useEffect(() => autorun(async () => {
        const { modelId } = partCollaborateStore;
        if (modelId) {
            const result = await partLableApi.get_joiner(1, 10, modelId);
            const joiner = get(result, ["data", "data"]) as Array<any>;
            setJoiner(joiner);
            const joinerTotal = Number(get(result, ["data", "totalCount"]));
            setJoinerTotal(joinerTotal);
        }
    }), []);

    return (
        <div ref={dom} className={styles.head} >
            <img
                src="./logo2.png"
                className={styles.logo}
                alt=""
                onClick={() => {
                    hashHistory.push("/");
                }}
            />

            <LeftOutlined />

            <Breadcrumb
                className={styles.breadcrumb}
                items={[
                    {
                        title: <a>{formName || "所有文件"}</a>,
                        onClick() {
                            if (userStore.isLogin !== true) {
                                hashHistory.push("/");
                            } else {
                                hashHistory.push(formPath || "/partsLibrary");
                            }
                        }
                    },
                    {
                        title: modelName,
                    }
                ]}
            />

            <span className={styles.title} >项目管理</span>


            <span className={styles.right} >

                <span className={styles.lable_num} >{joinerTotal}</span>
                {
                    joiner.map((p, i) => {
                        return (
                            <img
                                key={i}
                                src={p.userAvatarUrl}
                                alt=""
                                style={{ zIndex: (joiner.length - i) }}
                                className={styles.head_img}
                            />
                        );
                    })
                }

                <span
                    className={styles.share_btn}
                    onClick={() => {
                        shareModalStore.setShow(true);
                        shareModalStore.getShareToken(modelId);
                    }}
                >
                    邀请成员
                </span>

                {/* 登录按钮 */}
                <LoginBtn />

                {/* 分享链接弹窗 */}
                <ShareModal modelId={modelId} />
            </span>

        </div>
    );

}